<template>
  <div class="app-container">
    <el-form ref="form" :model="transactionControlConfiguration" label-width="80px" >
      <el-form-item label="交易账户">
        <el-col :span="11">
          <el-select v-model="transactionControlConfiguration.transactionAccount" placeholder="请选择">
            <el-option v-for="item in userOptions"
            :label="item.transactionAccount" 
            :value="item.transactionAccount" 
            :key="item.transactionAccount">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="交易动作">
        <el-select v-model="transactionControlConfiguration.transactionDirection" placeholder="请选择交易方向">
          <el-option label="卖出" value="1"/>
          <el-option label="买入" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="债券">
        <el-col :span="11">
          <el-button type="primary" @click="onSubmit">选择债券</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="偏离度">
        <el-col :span="11">
          <el-input v-model="transactionControlConfiguration.priceDeviation" placeholder="输入偏离度" style="width: 80%;"/>
        </el-col>
      </el-form-item>
      <el-form-item class="de-button">
        <el-button type="primary" @click="Over()">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import configuration from '@/api/configuration'
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      transactionControlConfiguration: {},
      account: 123456,
      id: '',
      configurationId: ''
    }
  },
  created() {
    this.configurationId = this.$route.params.configurationId
    this.search()
  },
  methods: {
    onSubmit() {
      configuration.save(this.transactionControlConfiguration).then(response => {
        this.id = response.data
        console.log(this.id)
        this.$router.push({ path: `/table/select/${this.id}/${this.account}` })
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    search() {
      configuration.find(this.configurationId).then(response => {
        this.transactionControlConfiguration = response.data
      })
    },
    Over() {
      configuration.saveConfigurationOver(this.transactionControlConfiguration).then(response => {
        this.$message({
          message: '恭喜你，保存成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style scoped>
.right-form{
  width: 300px;
}
.left-form{
  width: 300px;
}
.app-container{
  color: white;
  margin-left: 120px;
}
.de-button{
  margin-top: 60px;
  margin-left: 300px;
}
</style>

